<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 可以使用多个过滤器 -->
        <!-- 他是从左往右依次调用 -->
        <!-- 不管有多少个过滤器，最终显示的结果一定是最后一个过滤器的结果 -->
        <h2>{{ msg | sing | jump | rap }}</h2>

        <!-- vue3可以用方法实现过滤器的效果 -->
        <!-- 这句话的意思是调用 formatTime方法，并传入time作为参数 -->
        <!-- 最终方法返回什么，这里就显示什么 -->
        <h3>{{ formatTime(time) }}</h3>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '我的兴趣是：',
                time: '2022-7-25'
            },
            methods: {

                formatTime (val) {
                    
                    return val + '处理了'
                }
            },
            filters: {

                sing (val) {
                    console.log('sing调用', val) // 我的兴趣是：
                    return val + '唱'
                },

                jump (val) {
                    console.log('jump调用', val) // 我的兴趣是：唱
                    return val + '，跳'
                },
                rap (val) {
                    console.log('rap调用', val) // 我的兴趣是：唱，跳
                    return val + '，rap'
                }
            }
        })
    </script>
</body>
</html>